<template>
  <div class="app-container home">
    <!-- 欢迎区域 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover" class="welcome-card">
          <div class="welcome-header">
            <div class="welcome-left">
              <h1>欢迎使用枣庄旅游景点管理系统</h1>
              <p>{{ welcomeMessage }}</p>
            </div>
            <div class="welcome-right">
              <!-- <img src="@/assets/images/logo.png" alt="系统Logo" class="logo-image" /> -->
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>


    <!-- 系统信息 -->
    <el-row :gutter="20" class="mt20">
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>系统信息</span>
          </div>
          <div class="system-info">
            <el-row>
              <el-col :span="8">
                <div class="info-item">
                  <div class="info-label">系统版本：</div>
                  <div class="info-value">{{ version }}</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <div class="info-label">服务器环境：</div>
                  <div class="info-value">{{ systemInfo.serverEnv }}</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <div class="info-label">数据库版本：</div>
                  <div class="info-value">{{ systemInfo.dbVersion }}</div>
                </div>
              </el-col>
            </el-row>
            <el-row class="mt10">
              <el-col :span="8">
                <div class="info-item">
                  <div class="info-label">Spring Boot：</div>
                  <div class="info-value">{{ systemInfo.springBootVersion }}</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <div class="info-label">操作系统：</div>
                  <div class="info-value">{{ systemInfo.osName }}</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <div class="info-label">系统时间：</div>
                  <div class="info-value">{{ systemInfo.currentTime }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 开发团队 -->
    <el-row :gutter="20" class="mt20">
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>开发团队</span>
          </div>
          <div class="team-info">
            <el-row>
              <el-col :span="8" v-for="(member, index) in teamMembers" :key="index">
                <div class="team-member">
                  <div class="member-avatar">
                    <el-avatar :size="60" :src="member.avatar">{{ member.name.substr(0, 1) }}</el-avatar>
                  </div>
                  <div class="member-info">
                    <div class="member-name">{{ member.name }}</div>
                    <div class="member-role">{{ member.role }}</div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "Index",
  data () {
    return {
      // 版本号
      version: "3.8.9",
      // 欢迎消息
      welcomeMessage: "今天是 " + this.formatDate(new Date()) + "，祝您工作愉快！",
      // 图表时间范围
      chartTimeRange: 'week',
      // 统计卡片数据
      statisticsCards: [
        {
          title: "景点总数",
          value: "25",
          desc: "本月新增3个",
          icon: "international",
          color: "blue"
        },
        {
          title: "酒店总数",
          value: "18",
          desc: "本月新增2个",
          icon: "hotel",
          color: "green"
        },
        {
          title: "用户总数",
          value: "99",
          desc: "本周新增2人",
          icon: "peoples",
          color: "purple"
        }
      ],
      // 快捷入口
      shortcuts: [
        {
          title: "景点管理",
          icon: "international",
          color: "#409EFF",
          link: "/spots/list"
        },
        {
          title: "酒店管理",
          icon: "hotel",
          color: "#67C23A",
          link: "/hotel/list"
        },
        {
          title: "订单管理",
          icon: "shopping",
          color: "#E6A23C",
          link: "/order/list"
        },
        {
          title: "用户管理",
          icon: "peoples",
          color: "#F56C6C",
          link: "/system/user"
        },
        {
          title: "攻略管理",
          icon: "guide",
          color: "#909399",
          link: "/guide/list"
        },
        {
          title: "系统设置",
          icon: "system",
          color: "#9B59B6",
          link: "/system/config"
        }
      ],
      // 系统信息
      systemInfo: {
        serverEnv: "Window",
        dbVersion: "MySQL 5.7",
        springBootVersion: "2.5.14",
        osName: "Linux",
        currentTime: this.formatDateTime(new Date())
      },
      // 开发团队
      teamMembers: [
        {
          name: "Serenity",
          role: "项目负责人",
          avatar: ""
        }
      ],
      // 图表实例
      visitChart: null
    }
  },
  mounted () {
    this.initVisitChart()
    // 每分钟更新一次系统时间
    this.timer = setInterval(() => {
      this.systemInfo.currentTime = this.formatDateTime(new Date())
    }, 60000)
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer)
    }
    if (this.visitChart) {
      this.visitChart.dispose()
    }
  },
  watch: {
    chartTimeRange () {
      this.initVisitChart()
    }
  },
  methods: {
    goTarget (href) {
      this.$router.push(href)
    },
    // 格式化日期
    formatDate (date) {
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][date.getDay()]
      return `${year}年${month}月${day}日 ${week}`
    },
    // 格式化日期时间
    formatDateTime (date) {
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      const hours = date.getHours().toString().padStart(2, '0')
      const minutes = date.getMinutes().toString().padStart(2, '0')
      const seconds = date.getSeconds().toString().padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    // 初始化访问量图表

  }
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.welcome-card {
  background: linear-gradient(to right, #1890ff, #36cbcb);
  color: #fff;

  .welcome-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .welcome-left {
      h1 {
        font-size: 24px;
        margin: 0 0 10px 0;
      }

      p {
        font-size: 14px;
        margin: 0;
        opacity: 0.8;
      }
    }

    .welcome-right {
      .logo-image {
        width: 100px;
        height: 100px;
      }
    }
  }
}

.statistics-card {
  margin-bottom: 20px;

  .statistics-item {
    display: flex;
    align-items: center;

    &.blue .statistics-icon {
      background-color: rgba(24, 144, 255, 0.1);
      color: #1890ff;
    }

    &.green .statistics-icon {
      background-color: rgba(82, 196, 26, 0.1);
      color: #52c41a;
    }

    &.orange .statistics-icon {
      background-color: rgba(250, 173, 20, 0.1);
      color: #faad14;
    }

    &.purple .statistics-icon {
      background-color: rgba(114, 46, 209, 0.1);
      color: #722ed1;
    }

    .statistics-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 15px;

      i {
        font-size: 30px;
      }
    }

    .statistics-info {
      flex: 1;

      .statistics-title {
        font-size: 14px;
        color: #666;
        margin-bottom: 5px;
      }

      .statistics-value {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
      }

      .statistics-desc {
        font-size: 12px;
        color: #999;
      }
    }
  }
}

.chart-card {
  .chart-container {
    height: 350px;
  }
}

.shortcut-card {
  .shortcut-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;

    .shortcut-item {
      width: calc(50% - 20px);
      margin: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-5px);
      }

      .shortcut-icon {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        color: #fff;

        i {
          font-size: 24px;
        }
      }

      .shortcut-title {
        font-size: 14px;
        color: #333;
      }
    }
  }
}

.system-info {
  .info-item {
    display: flex;
    margin-bottom: 10px;

    .info-label {
      width: 120px;
      color: #666;
      text-align: right;
      padding-right: 10px;
    }

    .info-value {
      flex: 1;
      color: #333;
    }
  }
}

.team-info {
  .team-member {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .member-avatar {
      margin-right: 15px;
    }

    .member-info {
      .member-name {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
      }

      .member-role {
        font-size: 14px;
        color: #666;
      }
    }
  }
}
</style>
